<template>
  <div class="mac_bg"></div>
  <div class="login animate__animated" :class="{ 'animate__bounceOut': pass }">
    <div class="head">
      <img src="/img/ai.jpg" alt="">
    </div>
    <div class="message">请登录</div>
    <div class="form">
      <div class="item" :class="isUserNameError ? 'error' : ''">
        <input class="account" placeholder="请输入账号" v-model="form.userName" type="email" />
      </div>
      <div class="item" :class="isUserPasswordError ? 'error' : ''">
        <input class="password" placeholder="请输入密码" v-model="form.password" type="password" />
      </div>
      <div class="item">
        <el-input v-model="form.code" auto-complete="off" :placeholder="$t('login.code')">
          <template #prefix>
            <i class="icon-yanzhengma" style="color: aliceblue;"></i>
          </template>
          <template #append>
            <div class="login-code">
              <img style="width: 100%;height: 100%;" :src="code.src" @click="refreshCode" />
            </div>
          </template>
        </el-input>
        <i class="iconfont icon-send" @click="handleLogin"></i>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getCaptcha } from "@/api/login"
export default {
  data() {
    return {
      pass: false,
      isUserNameError: false,
      isUserPasswordError: false,
      form: {
        userName: "",
        password: "",
        code: "",
        captchaKey: "",
      },
      loginForm: {
        code: ''
      },
      code: {
        src: "",
      },
    }
  },
  computed: {
    ...mapGetters(["tagWel"])
  },
  created() {
    this.refreshCode();
  },
  methods: {
    // 获取验证码
    refreshCode() {
      getCaptcha().then(res => {
        if (res.code == 200) {
          this.code.src = res.data.captchaImg;
          this.form.captchaKey = res.data.captchaKey;
        }
      })
    },
    handleLogin() {
      if (this.form.userName == '') {
        this.isUserNameError = true
        setTimeout(() => {
          this.isUserNameError = false
        }, 1000)
        return
      } else if (this.form.password == '') {
        this.isUserPasswordError = true
        setTimeout(() => {
          this.isUserPasswordError = false
        }, 1000)
        return
      }
      this.$store.dispatch("LoginByUsername", this.form).then(() => {
        this.pass = true
        this.$router.push(this.tagWel);
      });
    }
  }
}
</script>
<style scoped>
@import url("./login.css");
</style>